<template>
  <div class="ng">
    <div class="Navigation">
      <!-- Modal -->
      <div
        class="modal fade"
        id="staticBackdrop"
        data-backdrop="static"
        data-keyboard="false"
        tabindex="-1"
        role="dialog"
        aria-labelledby="staticBackdropLabel"
        aria-hidden="true"
      >
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header position-relative">
              <button
                type="button"
                class="close position-absolute"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <detail class="det"></detail>
            </div>
          </div>
        </div>
      </div>
      <!--  -->
      
      <div class="header">
        <div class="header_p">
          <!-- <p class="header_p1">{{ keyValue }}</p> -->
          <p class="header_p1">热搜</p>
        </div>
        <div class="index">
          <div class="index_yilou" :key="index" v-for="(item, index) in res">
            <div>
              <a data-toggle="modal" data-target="#staticBackdrop"
                ><img :src="item.image" alt=""
              /></a>
            </div>
            <div class="index_yilou_d1">
              <div class="index_yilou_d1_1">
                <a href="/comm">{{ item.subject }}</a>
              </div>
              <div class="index_yilou_d1_2">{{ item.fenlei }}</div>
              <div class="index_yilou_d1_3">
                <a href="/comm">
                  <div class="iconfont icon-guankan1">{{ item.views }}}</div>
                  <div class="iconfont icon-pinglun1">{{ item.comment }}</div>
                  <div class="iconfont icon-zan">{{ item.xihuan }}</div>
                </a>
              </div>
            </div>
            <div class="index_yilou_d1_4">
              <img :src="item.avata" alt="" />
              <a href="">{{ item.uname }}</a>
              <span>{{ item.time }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Detail from "../../views/Detail.vue";

export default {
  props: ["typeId"],
  data() {
    return {
      res: [],
    };
  },
   mounted() {
    console.log(this.typeId);
    this.axios.get("/navigtion?page=3").then((res) => {
      console.log(res.data.result);
      this.res = res.data.result;
    });
  },

  components: {
    Detail,
  },
};
</script>>

<style lang="less">
@import url("~@/assets/Navigation/css/navigation.css");
@import url("~@/assets/Navigation/css/font_2025718_lh55ds847i/iconfont.css");
.ng {
  // 详情背景
  .det {
    background-color: rgba(0, 0, 0, 0) !important;
  }
  // 修改高度
  .Navigation .header_p {
    height: 70px !important;
  }
  // 模态

  .Navigation {
    .modal-content {
      border: 0px;
      background-color: rgba(0, 0, 0, 0);
      .modal-header {
        z-index: 20;
        border-bottom: 0px;
        .close {
          left: 6px;
          top: 48px;
          span {
            opacity: 0;
          }
        }
      }
      .modal-body {
        padding: 0px !important;
      }
    }
    ._btn5 {
      z-index: 0;
    }
  }
}

@media (min-width: 576px) {
  .modal-dialog {
    // max-width: 0px;
    margin: 0px;
    max-width: 100%;
  }
}
</style>


